<template>
   <div id="demo">
           <div class="tree">      
            <el-tree :data="resourceData" node-key="id"  default-expand-all  :props="{children: 'children', hasChildren: 'hasChildren'}"    :load="loadNode"  lazy
              @node-click="ChangeTree" ref="treeForm">
            </el-tree>
            </div>
          <div class="right"> 
            <div class="demo-input-suffix">
              <el-form :inline="true"   size="mini" class="demo-form-inline">
              <!--题目-->
              <el-form-item label="题目">
                 <el-input v-model="title"  placeholder="请输入题目"></el-input>
              </el-form-item>
           
               <!--题目类型-->
              <el-form-item label="题目类型">
              <el-select v-model="questionType" placeholder="请选择" >
                      <el-option
                        v-for="item in questionTypeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                </el-select>
              </el-form-item>
               <el-form-item>
                <el-button type="primary"  size="mini" @click='onserch' >查询</el-button>
                <el-button size="mini" icon="el-icon-refresh-right" @click='regest' >重置</el-button>
              </el-form-item>
             </el-form>

          </div>
          <!--biaoge--> 
          <div>
             <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  border
                   height="600">
                >
                  <!-- <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column> -->
                  <el-table-column
                    fixed
                    label="题目ID"
                    width="80">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                  </el-table-column>
                    <el-table-column
                         prop=""
                         label="复制"
                         width="120"
                       
                      >
                       <template slot-scope="scope">
                        <!-- <el-button type="primary" size="mini"  >复制题目内容</el-button> -->
                        <el-button type="danger" size="mini" @click.native.prevent="getlistinfo(scope.row.id,scope.row.type)">打开复制</el-button>
                     </template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="题目"
                    width="600"
                    show-overflow-tooltip
                     >
                     <template slot-scope="scope" >{{ scope.row.title }}</template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="题目类型"
                      width="85"
                    >
                     <template slot-scope="scope">
                      <span v-if="scope.row.type==1">单选题</span>
                      <span v-if="scope.row.type==2">多选题</span>
                      <span v-if="scope.row.type==3">判断题</span>
                      <span v-if="scope.row.type==4">情景题</span>
                      <span v-if="scope.row.type==5">简答题</span>
                      <span v-if="scope.row.type==6">辨析题</span>
                      <span v-if="scope.row.type==7">填空</span>
                      <span v-if="scope.row.type==8">完形填空</span>
                      <span v-if="scope.row.type==9">阅读理解</span>
                      <span v-if="scope.row.type==10">背景题</span>
                    </template>

                  </el-table-column>
                   <el-table-column
                    prop=""
                    label="难度"
                    width="55"
                   >
                     <template slot-scope="scope">{{ scope.row.difficultyLevel }}分</template>
                   
                  </el-table-column>
                   <!-- <el-table-column
                    prop=""
                    label="创建时间"
                    >
                     <template slot-scope="scope">{{ scope.row.ctime  | dateFormat }}</template>
                  </el-table-column> -->
                    <el-table-column
                    prop=""
                    label="题目状态"
                      width="85"
                   >
                    <template slot-scope="scope">
                      <el-tag type="info" v-if="scope.row.status==0">{{scope.row.editPeople}}-编辑中</el-tag>
                      <el-tag v-if="scope.row.status==1">上线</el-tag>
                      <el-tag type="danger" v-if="scope.row.status==2">下线</el-tag>
                      <el-tag  type="warning" v-if="scope.row.status==3">{{scope.row.checkPeople}}-校验中</el-tag>
                      <el-tag v-if="scope.row.status==4">{{scope.row.reviewPeople}}审核中</el-tag>
                      <el-tag type="success" v-if="scope.row.status==5">已审核</el-tag>
                    </template>
                   
                  </el-table-column>
                  <el-table-column
                      v-if="activeName==='1'"
                      class-name="status-col"
                      align="center"
                      label="编辑状态"
                       width="85"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.editStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.editStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-else-if="activeName==='2'"
                      class-name="status-col"
                      align="center"
                      label="校验状态"
                       width="85"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.checkStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.checkStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-else-if="activeName==='3'"
                      class-name="status-col"
                      align="center"
                      label="审核状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.reviewStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.reviewStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                     <el-table-column align="center"
                      prop=""
                      label="上线状态"
                        width="85"
                    >
                     <template slot-scope="scope">
                        <el-tag v-if="scope.row.onlineStatus===0" type="info">下线</el-tag>
                        <el-tag v-if="scope.row.onlineStatus===1" type="success">上线</el-tag>
                      
                      </template>
                    </el-table-column>
                   <!-- <el-table-column
                    prop="editPeople"
                    label="编辑人"
                   >
                  </el-table-column>
                   <el-table-column
                    prop="checkPeople"
                    label="检查人"
                    >
                  </el-table-column>
                   <el-table-column
                    prop="reviewPeople"
                    label="审核人"
                    > 
                  </el-table-column>-->
                 
                    <el-table-column
                    fixed="right"
                    prop=""
                    label="查看"
                    >
                     <template slot-scope="scope">
                        <router-link
                        :to="{
                          path:'/questionInfo',
                          query:{
                            id:scope.row.id
                          }
                        }"
                      >
                        <el-button type="primary" size="mini">查看</el-button>
                      </router-link>
                     
                      </template>
                  </el-table-column>
                
                </el-table>
          </div>
              <el-row class="page">
               
                  <el-pagination background layout="prev, pager, next" :total="totals"  :current-page.sync="pageNo"
                    :page-size="pageSize"  @current-change='currchange'></el-pagination>
          </el-row>  
         </div>  
         
        <el-dialog
          title="复制内容"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>
          <span>{{copttxt}}</span>
          <span slot="footer" class="dialog-footer">
             <el-button @click="centerDialogVisible = false">取 消复制</el-button>
         
            <el-button type="primary" class="tag-read" :data-clipboard-text="copttxt" @click="copy">确 定复制</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import Clipboard from "clipboard";
import { Loading } from 'element-ui';
import __Config from '../../../api/config';//实际路径
export default {
  name: "indedetail",
  data() {
    return {
        resourceData:[],
        id:null,
        questionTypeData:[],//题⽬类型 
        questionType:"",
        title:'',
        pageNo:1,
        pageSize:10,
        totals:null,
        tableData:[],
        activeName:'1',
        centerDialogVisible:false,
        copttxt:""
    }
    
  },

  created() {
           this.activeName = this.$store.getters.role === 1 ? "0" : "1";
          if (this.activeName === "1" && (this.$store.getters.permission & 1) <= 0) {
            this.activeName = "2";
          }
          if (this.activeName === "2" && (this.$store.getters.permission & 2) <= 0) {
            this.activeName = "3";
          }
   
      this.getList();
      this.questionBankViewList();
      this.getTable();
  },
  methods: {
  
   //根据ID获取知识点
      getList(){
             this.$axios({
              method:'get',
              url: __Config.api.getYW,
              headers: {
                'Authorization':this.$store.getters.token,
              },
             /* params:{
                  parentId:this.id
              }*/
              }).then((res)=>{
                

                   this.resourceData= res.data.data;
              }).catch((err)=>{
                  this.$message({
                      message: err.response.data.msg,
                      type: 'warning'
                });   
              })
      },
    //懒加载
      loadNode(node, resolve) {
           if(node.data.isLeaf){
             this.$axios({
              method:'get',
              url: __Config.api.gettree,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                  parentId:node.data.id
              }
              }).then((res)=>{
                   resolve(res.data.data);
              }).catch((err)=>{
                    this.$message({
                        message: err.response.data.msg,
                        type: 'warning'
                  });   
              })
           
           }else{
              resolve([]);
           }

         },
        getTable(){
           let options={
             background:"rgba(0, 0, 0, 0.8)",
             text:"加载中"
           }
            this.$axios({
              method:'get',
              url: __Config.api.getYWlist,
              headers: {
                "Content-Type":"application/json;",
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                    pageNo:this.pageNo,
                    pageSize:this.pageSize,
                    pointId:this.id,
                    title:this.title,
                    questionType:this.questionType,
              },
              }).then((res)=>{
                 
                   this.tableData = res.data.data;
                   this.totals = res.data.page.total;
                   loadingInstance.close();
              }).catch((err)=>{
                this.$message({
                        message: err.response.data.msg,
                        type: 'warning'
                  });
                
              })

         },
        ChangeTree(val){
             this.id = val.id;
             this.getTable();
        },
           //查询条件
        questionBankViewList(){
             this.$axios({
              method:'get',
              url: __Config.api.questionBankView,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{ }
              }).then((res)=>{
                 this.questionTypeData= res.data.data.questionType; 
              }).catch((err)=>{
                 
              })
        },
         currchange(e){
            this.pageNo=e;
            this.getTable();
        },
        onserch(){
            this.getTable();
        },
          regest(){
         this.title="";
         this.questionType="";
         this.getTable();
       },

      delHtml(title){
        //使用正则去除html 标签 以及一些空格 及其一些标签
          let content = title.replace(/<[^>]+>/g, "");
          content = content.replace(/&amp;&nbsp;/ig, '');
          content = content.replace(/(&nbsp;)/ig, '');
          content = content.replace(/&quot/ig, '');
          content = content.replace(/\s/ig, '');
          return   content; 
      }, 
      copy(){
        this.centerDialogVisible= false;
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {

         this.$message({
                  message: "复制成功",
                  type: 'success'
          });  
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
             this.$message({
                      message: "该浏览器不支持自动复制",
                      type: 'warning'
          });  
       
          // 释放内存
          clipboard.destroy()
        })
      },
      getlistinfo(id,type){
             var that =this;
             this.$axios({
              method:'get',
              url: __Config.api.getlistinfo+"/id:"+id,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{ }
              }).then((res)=>{
                
                  var  arr =[];
                  var str = '';
                  var arr1;
                 
                  if(type==1 || type==2||type==3){
                      
                       let title = that.delHtml(res.data.data.title);
                       let answer =res.data.data.answer;
                      
                       res.data.data.select.map(function(item){
                         
                         let ans = item.select;
                         let sle = that.delHtml(item.content)
                         
                          arr1 = item.select +":" + that.delHtml(item.content);
                          arr.push(arr1)
                           
                       })
                       str ="题目："+ title +  "/"+  "正确答案："+ answer + "/"+"选项："+arr.toString();
                       that.copttxt = str;
                  }else if(type==5 ||type==7){
                       let title = that.delHtml(res.data.data.title);
                       let answer =that.delHtml(res.data.data.answer);
                       str ="题目：" +   title+ "答案："+ answer;
                       that.copttxt = str;
                  }else if(type==4 ||type==9 ){ //情景题 阅读 只提供 题目复制，
                         var  type49 =[];
                         var ty49txt;
                           /*---------------------*/
                        
                         this.$axios({
                                method:'get',
                                url: __Config.api.getzt+id,
                                headers: {
                                  'Authorization':this.$store.getters.token,
                                },
                                params:{ }
                                }).then((res)=>{
                                    
                                     res.data.data.map(function(item,index){
                                        ty49txt = "题目" + that.delHtml(item.title);
                                        type49.push(ty49txt)
                                  })

                                  
                                }).then((err)=>{
                                       //console.log("22222222")
                                }).catch((err)=>{
                                     // console.log("3333333333")
                                 })
                           /*---------------------*/
                            
                            setTimeout(function(){
                                  let title = that.delHtml(res.data.data.title);
                                  let materials = that.delHtml(res.data.data.materials);
                                  str ="题目：" + title +"/"+"题目内容："+materials+"/"+"子题目："+type49.toString();
                                  that.copttxt = str;
                            },1000) 
                               
                  }if(type==6 ||type==10 ){ 
                         let title = that.delHtml(res.data.data.title);
                         str ="题目："+ title
                         that.copttxt = str;
                  }
                  that.centerDialogVisible =true; 

               
              }).catch((err)=>{
                 console.log(err)
              })
      }
    

     
  },
 
};
</script>

<style scoped>
 #demo{
     width:95%;
     margin:20px auto;
     display:flex;
     min-height:500px;
     display:flex;
 }
 .tree{
     width:280px;
     height: 650px;
     overflow-y: scroll;
 }
 .right{
     flex:1;
     margin-left:20px;
    overflow-x: scroll;
 }
.page{
  padding: 20px;
}
</style>
